<template>
	<view class="login">
        <view class="loginBg">
            <image class="loginLogo" src="@/static/images/loginLogo.png"></image>
        </view>
        <view class="loginMain">
            <view class="triangle-up"></view>
            <view class="loginForm">
                <view class="loginItem">
                    <image class="img1" src="@/static/images/username.png"></image>
                    <view>账号</view>
                </view>
                <u-input v-model="userName" placeholder="请输入账号"
                         type="text" />
            </view>
            <view class="loginForm">
                <view class="loginItem">
                    <image class="img2" src="@/static/images/password.png"></image>
                    <view>密码</view>
                </view>
                <u-input v-model="password" type="password" placeholder="请输入密码"/>
            </view>
            <view class="loginButton" :style="{opacity:userName&&password&&!loading?1:0.7}"
            @tap="loginTap">
                登录
            </view>
        </view>
        <u-toast ref="uToast" />
        <u-modal v-model="show" :content="content" title="登录失败"
        :show-cancel-button="false"></u-modal>
	</view>
</template>

<script>
    // 接口请求方法
    import { $http } from '../static/common/js/http.js'
	export default {
		data() {
			return {
                userName:'',
                password: '',
                show: false,
                loading:false,
                content: '账号或者密码错误，请重新输入'
			}
		},
		computed: {
		},
		onShow() {
		},
		methods: {
            getServerData(){
                const vm = this

                // uni.request({
                //     url: 'http://8.134.32.209:8181/fenghuoImp/loginAct/appLogin.html',
                //     data:{
                //         adminName: vm.userName,
                //         passWord: vm.password
                //     },
                //     success: function(res) {
                //         uni.setStorageSync('storage_name', res.data.name);
                //         uni.setStorageSync('storage_token', res.data.token);
                //         console.log(res.data)
                //     },
                //     fail: () => {
                //         vm.tips="网络错误，小程序端请检查合法域名";
                //     },
                // });
            },
            loginTap(){
                const vm = this
                if(vm.userName&&vm.password){
                    if(vm.loading===true){
                        return;
                    }
                    vm.loading=true
                    uni.showLoading({
                        title: '登录中'
                    });
                    $http('/fenghuoImp/loginAct/appLogin.html', 'post', {
                            adminName: vm.userName,
                            passWord: vm.password
                        },
                        res => {
                            uni.hideLoading();
                            // 成功处理
                            uni.setStorageSync('storage_name', res.data.name);
                            uni.setStorageSync('storage_token', res.data.token);
                            console.log(res,'9999')
                            if(res){
                                this.$refs.uToast.show({
                                    title: '登录成功',
                                    type: 'success'
                                })
                                setTimeout(()=>{
                                    vm.loading=false
                                    uni.switchTab({
                                        url: '/pages/example/components'
                                    })
                                },1000)
                            }else{
                                vm.loading=false
                                this.show=true
                            }
                        },
                        err => {
                            vm.loading=false
                            console.log(err,'err')
                        }
                    )
                }else{
                    return
                }
            }
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
	.login {
        .loginBg{
            width: 100%;
            height: 603rpx;
            padding-top: 235rpx;
            background-color: #0F81FF;
            background: url("../static/images/loginBg.png") no-repeat;
            /* 以父元素的百分比来设置背景图像的宽度和高度。*/
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            .loginLogo{
                width: 160rpx;
                height: 160rpx;
            }
        }
        & /deep/ .u-model__title{
            font-size: 36rpx;
            font-weight: bold;
            color: #262626;
        }
		height: 100%;
        .loginMain{
            padding: 97rpx 64rpx 0;
            border-top-left-radius: 60rpx;
            border-top-right-radius: 60rpx;
            position: relative;
            top:-156rpx;
            z-index: 10;
            background-color: #fff;
            .loginForm{
                & /deep/ .u-input{
                    border-bottom: 1rpx solid #F0F0F0;
                }
                width: 100%;
                margin-bottom: 48rpx;
                .loginItem{
                    display: flex;
                    align-items: center;
                    margin-bottom: 28rpx;
                    image{
                        margin-right: 16rpx;
                    }
                    view{
                        font-size: 36rpx;
                        font-weight: bold;
                        color: #262626;
                    }
                }
                .img1{
                    width: 26rpx;
                    height: 24rpx;
                }
                .img2{
                   width: 22rpx;
                    height: 26rpx;
                }
            }
        }
        .loginButton{
            background: #0F81FF;
            border-radius: 24rpx;
            height: 96rpx;
            line-height: 96rpx;
            text-align: center;
            width: 100%;
            margin-top: 134rpx;
            font-size: 36rpx;
            font-weight: bold;
            color: #FFFFFF;
        }
        .triangle-up {
            width: 0;
            height: 0;
            border-left: 45rpx solid transparent;
            border-right: 45rpx solid transparent;
            border-bottom: 36rpx solid #fff;
            position: absolute;
            left: calc(50% - 45rpx);
            top: -30rpx;
        }
	}
</style>
